<template>
	<view class="order-detail">
		<view class="number">
			<view class="numer-text" @click="copyOrder(orderDetail.out_trade_no)">订单号: {{ orderDetail.out_trade_no }}</view>
			<view class="state">{{ orderDetail.state.text }}</view>
		</view>
		<view class="line"></view>
		<view class="subject">
			<view class="subject-text">{{ orderDetail.subject }}</view>
			<view class="subject-state">{{ orderDetail.trade_type.text }}</view>
		</view>
		<view class="line"></view>
		<view class="amount">
			<view class="amount-text">订单金额: </view>
			<view class="amount-state">￥{{ parseFloat(orderDetail.trade_money).toFixed(2)}}</view>
		</view>
		<view class="line"></view>
		<view class="subject" @click="copyOrder(orderDetail.jky_trade_no)">
			<view class="subject-text">流水号:</view>
			<view class="subject-state">{{ orderDetail.jky_trade_no }}</view>
		</view>
		<view class="line"></view>
		<view class="subject">
			<view class="subject-text">创建时间:</view>
			<view class="subject-state">{{orderDetail.create_time }}</view>
		</view>
		<view class="line"></view>
		<view class="subject" v-if="orderDetail.state === 2">
			<view class="subject-text">支付时间:</view>
			<view class="subject-state">{{ orderDetail.pay_time }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderDetail: {}
			}
		},
		onLoad(detail) {
			const param = JSON.parse(decodeURIComponent(detail.param))
			this.orderDetail = Object.assign({}, param)
			console.log('detail', this.orderDetail.state.text)
		},
		methods: {
			copyOrder(order) {
				uni.setClipboardData({
					data: order,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-detail {
		padding: 40rpx 36rpx;
		background: #fff;
		height: 100vh;
	}
	.number {
		display: flex;
		justify-content: space-between;
		font-size: #{$auxiliary-size};
		.numer-text {
			color: #{$sub-color};
		}
		.state {
			color: #{$main-color};
			font-size: 28rpx;
		}
	}
	.subject {
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		// padding: 28rpx 0;
		.subject-text {
			color: #{$one-title-color};
		}
		.subject-state {
			color: #{$sub-color};
			font-size: 28rpx;
		}
	}
	.amount {
		display: flex;
		justify-content: space-between;
		font-size: 32rpx;
		color: #{$one-title-color};
	}
	.line {
		border-bottom: 1px solid #f5f5f5;
		margin: 28rpx 0;
	}
</style>